<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排行榜</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #282c34; /* 改为与之前代码相同的背景颜色 */
    color: #abb2bf; /* 字体颜色 */
    margin: 0;
    padding: 20px;
  }

  .rank-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #21252b; /* 改为与之前代码相同的背景颜色 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 20px;
    overflow: hidden;
  }

  .rank-header {
    text-align: center;
    margin-bottom: 20px;
  }

  .rank-title {
    font-size: 24px;
    color: #e06c75; /* 标题颜色改为与之前代码相同的颜色 */
  }

  .rank-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  .rank-table th,
  .rank-table td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #444; /* 改为与之前代码相同的边框颜色 */
  }

  .rank-table th {
    background-color: #333; /* 表头背景颜色 */
    font-weight: bold;
  }

  .rank-table tr:hover {
    background-color: #373b41; /* 鼠标悬浮背景颜色 */
  }

  .rank-index {
    color: #abb2bf; /* 字体颜色 */
    font-size: 18px;
    text-align: center;
  }

  .rank-name {
    font-size: 18px;
    color: #abb2bf; /* 字体颜色 */
  }

  .rank-signature {
    font-style: italic;
    color: #9e9e9e; /* 字体颜色 */
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rank-data {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #abb2bf; /* 字体颜色 */
  }

  .rank-data span {
    margin-right: 10px;
  }

  .rank-data .pass-rate {
    color: #4caf50; /* 通过率颜色 */
  }

  /* 美化排名1、2、3的样式，仅应用于表格主体中的排名项 */
  .rank-table tbody tr:nth-child(1) .rank-index {
    background-color: #ffcc80; /* 金色 */
    font-weight: bold;
  }

  .rank-table tbody tr:nth-child(2) .rank-index {
    background-color: #ffb74d; /* 银色 */
    font-weight: bold;
  }

  .rank-table tbody tr:nth-child(3) .rank-index {
    background-color: #ffa726; /* 铜色 */
    font-weight: bold;
  }

  .rank-table tbody tr:nth-child(1) .rank-index::before {
    content: "🥇";
    margin-right: 5px;
    color: #333;
  }

  .rank-table tbody tr:nth-child(2) .rank-index::before {
    content: "🥈";
    margin-right: 5px;
    color: #333;
  }

  .rank-table tbody tr:nth-child(3) .rank-index::before {
    content: "🥉";
    margin-right: 5px;
    color: #333;
  }

  @keyframes popIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    80% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
</style>
</head>
<body>

<div class="rank-container">
  <div class="rank-header">
    <h1 class="rank-title">排行榜</h1>
  </div>
  <table class="rank-table" id="rankTable">
    <thead>
      <tr>
        <th class="rank-index">排名</th>
        <th class="rank-name">名字</th>
        <th class="rank-signature">个人签名</th>
        <th class="rank-data">通过率</th>
        <th class="rank-data">通过题目数</th>
      </tr>
    </thead>
    <tbody>
      <!-- 排行榜项将通过JS动态插入 -->
    </tbody>
  </table>
</div>

<script>
  // 调用API获取排行榜数据
  function fetchRankingData() {
    return fetch("/rankings_data")
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
      });
  }
  
  // 渲染排行榜
  function renderRanking(data) {
    const tableBody = document.getElementById('rankTable').querySelector('tbody');
    data.forEach((item, index) => {
      const row = document.createElement('tr');
      // 为排名1、2、3的条目添加特别样式
      const rankIndex = index === 0 ? '' : index === 1 ? '' : index === 2 ? '' : (index + 1).toString();
      row.innerHTML = `
        <td class="rank-index">${rankIndex}</td>
        <td class="rank-name">${item.name}</td>
        <td class="rank-signature">${item.signature}</td>
        <td class="rank-data"><span class="pass-rate">${item.probability}</span></td>
        <td class="rank-data">${item.count} 题通过</td>
      `;
      tableBody.appendChild(row);
    });
  }
  
  // 动画效果
  function animateIn(element) {
    element.style.animation = 'popIn 0.5s ease forwards';
  }
  
  // 主函数
  function main() {
    fetchRankingData().then(data => {
      if (data) {
        renderRanking(data);
        document.querySelectorAll('.rank-table tr').forEach(animateIn);
      }
    });
  }
  
  // 调用主函数
  main();
  </script>

</body>
</html>